import React, { useState } from 'react';
import { 
  TrendingUp, TrendingDown, AlertCircle, CheckCircle, 
  Calendar, Users, FileText, BarChart3, Plus, Eye,
  Activity, Zap, Leaf, Shield, Database
} from 'lucide-react';

const Dashboard = () => {
  const [selectedPeriod, setSelectedPeriod] = useState('month');

  // 模拟关键指标数据
  const keyMetrics = [
    {
      id: 'carbon',
      title: '碳排放总量',
      value: '15,678',
      unit: 'tCO2e',
      change: -12.5,
      trend: 'down',
      icon: Leaf,
      color: 'green',
      description: '较上月减少12.5%'
    },
    {
      id: 'energy',
      title: '能源消耗',
      value: '234,567',
      unit: 'kWh',
      change: 8.3,
      trend: 'up',
      icon: Zap,
      color: 'yellow',
      description: '较上月增加8.3%'
    },
    {
      id: 'compliance',
      title: '合规得分',
      value: '89.2',
      unit: '分',
      change: 5.7,
      trend: 'up',
      icon: Shield,
      color: 'blue',
      description: '较上月提升5.7分'
    },
    {
      id: 'reports',
      title: '待审核报告',
      value: '23',
      unit: '份',
      change: -15.2,
      trend: 'down',
      icon: FileText,
      color: 'purple',
      description: '较上月减少15.2%'
    }
  ];

  // 模拟近期活动数据
  const recentActivities = [
    {
      id: 1,
      type: 'data_entry',
      title: '新增碳排放数据',
      description: '张三上传了2024年1月份的碳排放数据',
      time: '2小时前',
      status: 'pending',
      icon: Database,
      color: 'blue'
    },
    {
      id: 2,
      type: 'approval',
      title: '数据审核完成',
      description: '李四审核通过了能源消耗数据',
      time: '4小时前',
      status: 'completed',
      icon: CheckCircle,
      color: 'green'
    },
    {
      id: 3,
      type: 'alert',
      title: '合规风险预警',
      description: '发现潜在的环境合规风险，需要关注',
      time: '6小时前',
      status: 'warning',
      icon: AlertCircle,
      color: 'red'
    },
    {
      id: 4,
      type: 'report',
      title: '月度报告生成',
      description: '系统自动生成了12月份ESG月度报告',
      time: '1天前',
      status: 'completed',
      icon: BarChart3,
      color: 'purple'
    }
  ];

  // 模拟快速操作
  const quickActions = [
    {
      id: 'add_data',
      title: '录入数据',
      description: '快速录入ESG相关数据',
      icon: Plus,
      color: 'blue',
      action: () => console.log('Navigate to data entry')
    },
    {
      id: 'view_reports',
      title: '查看报告',
      description: '查看已生成的报告',
      icon: Eye,
      color: 'green',
      action: () => console.log('Navigate to reports')
    },
    {
      id: 'check_approval',
      title: '审批任务',
      description: '处理待审批的任务',
      icon: FileText,
      color: 'orange',
      action: () => console.log('Navigate to approval')
    },
    {
      id: 'view_analytics',
      title: '数据分析',
      description: '查看详细的数据分析',
      icon: BarChart3,
      color: 'purple',
      action: () => console.log('Navigate to analytics')
    }
  ];

  // 模拟图表数据
  const chartData = {
    carbon_trend: [
      { month: '7月', value: 18200 },
      { month: '8月', value: 17800 },
      { month: '9月', value: 16900 },
      { month: '10月', value: 16200 },
      { month: '11月', value: 15800 },
      { month: '12月', value: 15678 }
    ],
    category_breakdown: [
      { category: 'Scope 1', value: 6543, percentage: 41.7 },
      { category: 'Scope 2', value: 5432, percentage: 34.6 },
      { category: 'Scope 3', value: 3703, percentage: 23.6 }
    ]
  };

  const getColorClasses = (color) => {
    const colorMap = {
      green: 'bg-green-500 text-green-100',
      yellow: 'bg-yellow-500 text-yellow-100',
      blue: 'bg-blue-500 text-blue-100',
      purple: 'bg-purple-500 text-purple-100',
      red: 'bg-red-500 text-red-100',
      orange: 'bg-orange-500 text-orange-100'
    };
    return colorMap[color] || 'bg-gray-500 text-gray-100';
  };

  const getStatusColor = (status) => {
    const statusMap = {
      pending: 'bg-yellow-100 text-yellow-800',
      completed: 'bg-green-100 text-green-800',
      warning: 'bg-red-100 text-red-800'
    };
    return statusMap[status] || 'bg-gray-100 text-gray-800';
  };

  return (
    <div className="p-6 space-y-6 max-w-7xl mx-auto">
      {/* 页面标题和时间选择器 */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">ESG 仪表盘</h2>
          <p className="text-gray-600">实时监控关键ESG指标和业务状况</p>
        </div>
        <div className="flex items-center space-x-3">
          <Calendar className="h-5 w-5 text-gray-400" />
          <select 
            value={selectedPeriod}
            onChange={(e) => setSelectedPeriod(e.target.value)}
            className="border border-gray-300 rounded-lg px-3 py-2 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="week">本周</option>
            <option value="month">本月</option>
            <option value="quarter">本季度</option>
            <option value="year">本年度</option>
          </select>
        </div>
      </div>

      {/* 关键指标卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {keyMetrics.map((metric) => {
          const Icon = metric.icon;
          const isPositive = metric.trend === 'up';
          const TrendIcon = isPositive ? TrendingUp : TrendingDown;
          
          return (
            <div key={metric.id} className="bg-white rounded-lg shadow-md p-6">
              <div className="flex items-center justify-between mb-4">
                <div className={`p-3 rounded-lg ${getColorClasses(metric.color)}`}>
                  <Icon className="h-6 w-6" />
                </div>
                <div className={`flex items-center text-sm ${
                  metric.trend === 'up' ? 'text-green-600' : 'text-red-600'
                }`}>
                  <TrendIcon className="h-4 w-4 mr-1" />
                  {Math.abs(metric.change)}%
                </div>
              </div>
              
              <div className="space-y-1">
                <p className="text-sm text-gray-600">{metric.title}</p>
                <p className="text-2xl font-bold text-gray-900">
                  {metric.value} <span className="text-lg text-gray-500">{metric.unit}</span>
                </p>
                <p className="text-xs text-gray-500">{metric.description}</p>
              </div>
            </div>
          );
        })}
      </div>

      {/* 图表区域 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 碳排放趋势图 */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">碳排放趋势</h3>
            <button className="text-blue-600 hover:text-blue-800 text-sm">查看详情</button>
          </div>
          
          <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
            <div className="text-center">
              <BarChart3 className="h-12 w-12 text-gray-400 mx-auto mb-2" />
              <p className="text-gray-500">图表组件占位符</p>
              <p className="text-xs text-gray-400">在实际开发中集成图表库</p>
            </div>
          </div>
          
          <div className="mt-4 grid grid-cols-3 gap-4 text-center">
            {chartData.carbon_trend.slice(-3).map((item, idx) => (
              <div key={idx} className="text-sm">
                <div className="text-gray-600">{item.month}</div>
                <div className="font-semibold text-gray-900">{item.value.toLocaleString()}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 排放分类占比 */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">排放分类占比</h3>
            <button className="text-blue-600 hover:text-blue-800 text-sm">查看详情</button>
          </div>
          
          <div className="space-y-4">
            {chartData.category_breakdown.map((item, idx) => (
              <div key={idx} className="flex items-center justify-between">
                <div className="flex items-center">
                  <div className={`w-4 h-4 rounded mr-3 ${
                    idx === 0 ? 'bg-blue-500' : idx === 1 ? 'bg-green-500' : 'bg-yellow-500'
                  }`}></div>
                  <span className="text-sm text-gray-700">{item.category}</span>
                </div>
                <div className="text-right">
                  <div className="text-sm font-semibold text-gray-900">{item.value.toLocaleString()} tCO2e</div>
                  <div className="text-xs text-gray-500">{item.percentage}%</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 下半部分：快速操作和近期活动 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 快速操作 */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">快速操作</h3>
          <div className="space-y-3">
            {quickActions.map((action) => {
              const Icon = action.icon;
              return (
                <button
                  key={action.id}
                  onClick={action.action}
                  className="w-full flex items-center p-3 rounded-lg border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors"
                >
                  <div className={`p-2 rounded-lg mr-3 ${getColorClasses(action.color)}`}>
                    <Icon className="h-4 w-4" />
                  </div>
                  <div className="text-left">
                    <div className="text-sm font-medium text-gray-900">{action.title}</div>
                    <div className="text-xs text-gray-500">{action.description}</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* 近期活动 */}
        <div className="lg:col-span-2 bg-white rounded-lg shadow-md p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">近期活动</h3>
            <button className="text-blue-600 hover:text-blue-800 text-sm">查看全部</button>
          </div>
          
          <div className="space-y-4">
            {recentActivities.map((activity) => {
              const Icon = activity.icon;
              return (
                <div key={activity.id} className="flex items-start space-x-3">
                  <div className={`p-2 rounded-lg ${getColorClasses(activity.color)}`}>
                    <Icon className="h-4 w-4" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <p className="text-sm font-medium text-gray-900 truncate">
                        {activity.title}
                      </p>
                      <span className={`px-2 py-1 text-xs rounded-full ${getStatusColor(activity.status)}`}>
                        {activity.status === 'pending' ? '处理中' : 
                         activity.status === 'completed' ? '已完成' : '需关注'}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 mt-1">{activity.description}</p>
                    <p className="text-xs text-gray-400 mt-1">{activity.time}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard; 